﻿@{
    ViewData["Title"] = "Home Page";
}

@section Styles {
<link rel="stylesheet" href="~/lib/message-util/message.css"/>
}

<div class="row mb-2">
    <div class="col-12">
        <button class="btn btn-outline-info" @@click="edit(0)">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
            </svg>          
            添加
        </button>
        <button class="btn btn-outline-info" @@click="list()">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
                <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z" />
                <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z" />
            </svg>
            刷新
        </button>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 mb-1" v-for="(site, index) in sites" v-cloak>
        <div class="card">
            <div class="card-header" style="padding: 10px;padding-bottom:5px;">
                <div style="display: flex; flex-wrap: nowrap;justify-content: space-between">
                    <h3 class="single-line-text-overflow">{{ site.name }}</h3>
                    <div class="float-right" style="min-width: 140px;">
                        <button class="btn btn-sm btn-outline-info" @@click="edit(site.id)" title="编辑">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
                            </svg>
                            编辑
                        </button>
                        <button class="btn btn-sm btn-danger" @@click="deleteSite(site.id)" :id="getBtnDeleteId(site.id)" title="删除">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
                                <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
                            </svg>
                            删除
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p v-if="site.indexUrl">
                    主页:
                    {{ site.indexUrl }}
                    <a :href="site.indexUrl" target="_blank" title="访问网站">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z" />
                            <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z" />
                        </svg>
                    </a>
                    |
                    <a class="copy-link" :data-clipboard-text="site.indexUrl">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
                            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                        </svg>
                    </a>
                </p>
                <p v-if="site.adminUrl">
                    管理:
                    {{ site.adminUrl }}
                    <a :href="site.adminUrl" target="_blank" title="访问网站">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z" />
                            <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z" />
                        </svg>
                    </a>
                    |
                    <a class="copy-link" :data-clipboard-text="site.adminUrl">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
                            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                        </svg>
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>
<div class="modal" role="dialog" id="editModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新建/编辑 站点</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label>名称</label>
                        <input class="form-control" type="text" v-model="currentEdit.name"/>
                    </div>
                    <div class="form-group">
                        <label>主页</label>
                        <input class="form-control" type="text" v-model="currentEdit.indexUrl"/>
                    </div>
                    <div class="form-group">
                        <label>管理后台</label>
                        <input class="form-control" type="text" v-model="currentEdit.adminUrl"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" @@click="save">保存</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>


@section Scripts {
<script src="~/js/axios.min.js"></script>
<script src="~/lib/vue/vue.min.js"></script>
<script src="~/lib/clipboardjs/clipboard.min.js"></script>
<script src="~/lib/message-util/message-util.js"></script>
<script>
    const util = new MessageUtil();
    const app = new Vue({
        el: "#app",
        data: function () {

            return {
                sites: [],
                currentEdit: {
                    id: 0,
                    name: "",
                    indexUrl: "",
                    adminUrl: "",
                    lastUpdatedTime: new Date()
                },
            }
        },
        methods: {
            save: function () {
                const _this = this;
                var data = this.currentEdit;
                axios.post("@Url.Action("Post", "Sites")", data)
                    .then(function (resp) {
                        if (resp.data.isSuccess) {
                            // 保存成功
                            util.success({
                                msg: "保存成功"
                            });
                            // 关闭弹窗
                            _this.closeEditModal();
                            _this.list();
                        } else {
                            util.warn({
                                msg: resp.data.message
                            })
                        }
                    })
                    .catch(function (err) {
                        console.error(err);
                        util.error({
                            msg: "保存出错"
                        })
                    })
            },
            list: function () {
                const _this = this;
                axios.get("@Url.Action("Get", "Sites")")
                    .then(function (resp) {
                        if (resp.data.isSuccess) {
                            _this.sites = resp.data.result;
                            //initPopover();
                        } else {
                            util.warn({
                                msg: resp.data.message
                            });
                        }
                    })
                    .catch(function (err) {
                        console.error(err);
                        util.error({
                            msg: "获取站点列表失败"
                        });
                    });
            },
            deleteSite: function (id) {
                const _this = this;

                if (id <= 0) {
                    return false;
                }

                if (confirm("确认要删除这个站点吗?")) {
                    axios.post("@Url.Action("Delete", "Sites", new { id="$id$"})".replace("$id$", id))
                        .then(function (resp) {
                            if (resp.data.isSuccess) {
                                util.success({
                                    msg: "删除成功"
                                });
                                _this.list();
                            } else {
                                util.warn({
                                    msg: resp.data.message
                                });
                            }
                        })
                        .catch(function (err) {
                            console.error(err);
                            util.error({
                                msg: "删除站点信息出错"
                            });
                        });
                }
            },
            edit: function (id) {
                const _this = this;
                if (id > 0) {
                    axios.get("@Url.Action("Get", "Sites", new { id="$id$"})".replace("$id$", id))
                        .then(function (resp) {
                            if (resp.data.isSuccess) {
                                _this.currentEdit = resp.data.result;
                                // 打开对话框
                                _this.openEditModal();
                            } else {
                                util.warn({ msg: resp.data.message });
                            }
                        })
                        .catch(function (err) {
                            console.error(err);
                            util.error({ msg: "获取要编辑的站点信息失败" });
                        });
                } else {
                    _this.currentEdit = {
                        id: 0,
                        name: "",
                        indexUrl: "",
                        adminUrl: "",
                        lastUpdatedTime: new Date()
                    }
                    // 打开对话框
                    _this.openEditModal();
                }
            },
            closeEditModal: function () {
                $("#editModal").modal("hide");
            },
            openEditModal: function () {
                $("#editModal").modal("show");
            },
            copyToClipboard: function (content){
                var input_to_clipboard = document.createElement("input");
                input_to_clipboard.id = "input_to_clipboard";
                input_to_clipboard.style.display = "none";
                input_to_clipboard.value = content;
                input_to_clipboard.type = "text";
                document.getElementsByTagName("body")[0].appendChild(input_to_clipboard);
                document.getElementById("input_to_clipboard").select();
                document.execCommand("copy");
                document.getElementById("input_to_clipboard").remove();
            },
            getBtnDeleteId: function (id) {
                return "btn-delete-" + id;
            },
        },
        mounted: function () {
            this.list();
        }
    })


    const clipboard = new ClipboardJS('.copy-link');

    //剪贴板成功事件
    clipboard.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        $(e.trigger).on("hidden.bs.tooltip", function (e) {
            console.log("tooltip hide");
            $(this).tooltip("dispose"); // 鼠标移开口，自动隐藏，触发tooltip销毁
        })

        $(e.trigger)
            .tooltip({
                title: '复制成功'
            })
            .tooltip('show');

    });

    // 剪贴板错误事件
    clipboard.on('error', function (e) {
        //console.error('Action:', e.action);
        //console.error('Trigger:', e.trigger);

        console.error(e.action + "出错");

        $(e.trigger).on("hidden.bs.tooltip", function (e) {
            console.log("tooltip hide");
            $(this).tooltip("dispose"); // 鼠标移开口，自动隐藏，触发tooltip销毁
        })

        $(e.trigger)
            .tooltip({
                title: '复制失败，请手动复制'
            })
            .tooltip('show');
    });
</script>
}
